<template>
  <div id="app">
    <div class="flex-column center loading-box" style="display: none;">
      <img src="@/assets/image/loading.gif" class="loading">
    </div>
    <section data-v-395cb77c="" class="yd-flexview layout"
             :style="{background: 'url('+require('@/assets/image/bg_invitation.png')+')',backgroundRepeat: 'no-repeat',backgroundSize: 'cover'}">
      <section>
        <div data-v-395cb77c="" class="container flex-column center">
          <div data-v-395cb77c="" class="info-box flex-row">
            <div data-v-395cb77c="" class="head-box">
              <img data-v-395cb77c="" src="@/assets/image/man_head_img.png" alt="" class="head">
            </div>
            <div data-v-395cb77c="" class="nickname-box flex-column">
              <span data-v-395cb77c="" class="nickname" v-text=""></span>
              <span data-v-395cb77c="">邀请你加入聚缘公园啦</span>
            </div>
          </div>
          <div data-v-395cb77c="" class="slogan-box flex-column">
            <b data-v-395cb77c="">聚缘公园</b>
            <b data-v-395cb77c="">快速可靠的交友平台</b>
          </div>
          <div data-v-395cb77c="" class="code-box flex-row center">
            <div data-v-395cb77c="" class="label">邀请码</div>
            <div data-v-395cb77c="" class="code flex-row" id="copy_target" v-text="inviteCode"></div>
            <div data-v-395cb77c="" class="btn-copy flex-row center" data-clipboard-action="copy"
                 data-clipboard-target="#copy_target" v-clipboard:copy="inviteCode" v-clipboard:success="onCopy"
                 v-clipboard:error="onError">复制
            </div>
          </div>
          <div data-v-395cb77c="" class="download-box flex-row center">
            <div data-v-395cb77c="" class="logo"></div>
            <div data-v-395cb77c="" class="logo-text-box flex-column">
              <div data-v-395cb77c="" class="logo-text">聚缘公园</div>
              <div data-v-395cb77c="" class="logo-slogan">高端约会社交</div>
            </div>
            <div data-v-395cb77c="" class="btn-download flex-row center" v-on:click="downloadButton">下载</div>
          </div>
        </div>

        <van-dialog v-model="showDialog" title="如何使用邀请码" :showConfirmButton="false" closeOnClickOverlay>
          <div data-v-395cb77c="" class="jiaocheng-box flex-column center">
            <div data-v-395cb77c="" class="animated fadeIn con-box flex-column">
              <div data-v-395cb77c="" class="con">
                <div data-v-395cb77c="" class="text">1.男士用户在注册&gt;欢迎页填写你收到的邀请码</div>
                <img data-v-395cb77c="" src="@/assets/image/jiaocheng1.png" class="img-jiaocheng">
                <div data-v-395cb77c="" class="text">2.女士用户在聚缘公园APP内&gt;我的&gt;填写邀请码中输入您收到的邀请码（注：邀请码同一用户仅可填写一次）</div>
                <img data-v-395cb77c="" src="@/assets/image/jiaocheng2.png" class="img-jiaocheng">
              </div>
              <div data-v-395cb77c="" class="btn-download flex-row center" v-on:click="downloadButton">知道了，下载聚缘公园</div>
              <div data-v-395cb77c="" class="icon icon-close" id="jiaochengBoxClose"></div>
            </div>
          </div>
        </van-dialog>

      </section>
    </section>
  </div>
</template>
<script>
  import {Dialog} from 'vant';

  export default {
    name: "promotion",
    data() {
      return {
        showDialog: false,
        inviteCode: null,
        m:null
      }
    },
    mounted() {
      this.inviteCode = this.$route.params && this.$route.params.inviteCode;
      this.init();
    },
    methods: {
      // 复制成功时的回调函数
      onCopy(e) {
        if (this.inviteCode == null) return;
        this.showDialog = true;
      },
      onError(e) {
        Dialog.alert({
          title: '系统提示',
          message: '抱歉，复制失败！',
        });
      },
      init() {
        let _this = this;
        const s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'https://web.cdn.openinstall.io/openinstall.js'
        s.addEventListener('load',()=>{
          var data = OpenInstall.parseUrlParams();//openinstall.js中提供的工具函数，解析url中的所有查询参数
          new OpenInstall({
            /*appKey必选参数，openinstall平台为每个应用分配的ID*/
            appKey : "sgy8z1",
            /*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*/
            //apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',
            /*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*/
            //preferWakeup:true,
            /*自定义遮罩的html*/
            //mask:function(){
            //  return "<div id='openinstall_shadow' style='position:fixed;left:0;top:0;background:rgba(0,255,0,0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'></div>"
            //},
            /*openinstall初始化完成的回调函数，可选*/
            onready : function() {
              _this.m = this;
            }
          }, data);
        },false)
        document.head.appendChild(s);

      },
      downloadButton(){
        this.m.wakeupOrInstall();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
